<template>
<h1>个人简历练习</h1>
  <hr>
  <table border="1px" >
    <tr>
      <td>照片</td>
      <td><img :src="person.imgUrl" width="100px"></td>
    </tr>
    <tr>
      <td>姓名</td>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <td>年龄</td>
      <td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友</td>
      <td><ul><li v-for="item in person.friends">{{item}}</li></ul></td>
    </tr>



  </table>
  <button @click="loadData">点我加载数据</button>
</template>
<script setup>
//准备一个空对象
import {ref} from "vue";

const person=ref({name:'',age:'',imgUrl:'',friends:[]});
const loadData=()=>{
  person.value={
    name:'范传奇',
    age:18,
    imgUrl: 'fcq.jpg',
    friends: ['张三','李四','王五']
  }
  console.log(person.value)
}

</script>


<style scoped>

</style>